<template>
  <div>
    <p class="mb-2">当前拥有的code列表：{{ getAuthCode() }}</p>

    <el-card shadow="never" class="mb-2">
      <template #header>
        <div class="card-header">组件方式判断权限</div>
      </template>
      <el-space wrap>
        <Auth value="permission:btn:add">
          <el-button type="warning"> 拥有code：'permission:btn:add' 权限可见 </el-button>
        </Auth>
        <Auth :value="['permission:btn:edit']">
          <el-button type="primary"> 拥有code：['permission:btn:edit'] 权限可见 </el-button>
        </Auth>
        <Auth :value="['permission:btn:add', 'permission:btn:edit', 'permission:btn:delete']">
          <el-button type="danger">
            拥有code：['permission:btn:add', 'permission:btn:edit', 'permission:btn:delete']
            权限可见
            <!-- <template #dot="slotProps"></template> -->
          </el-button>
        </Auth>
      </el-space>
    </el-card>
    <el-card shadow="never" class="mb-2">
      <template #header>
        <div class="card-header">指令方式判断权限</div>
      </template>
      <el-space wrap>
        <el-button type="warning" v-auth="'permission:btn:add'">
          拥有code：'permission:btn:add' 权限可见
        </el-button>
        <el-button type="primary" v-authvalue="['permission:btn:edit']">
          拥有code：['permission:btn:edit'] 权限可见
        </el-button>
        <el-button
          type="danger"
          v-auth="['permission:btn:add', 'permission:btn:edit', 'permission:btn:delete']"
        >
          拥有code：['permission:btn:add', 'permission:btn:edit', 'permission:btn:delete'] 权限可见
        </el-button>
      </el-space>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { getAuthCode } from '@/router/utils'
defineOptions({
  name: 'PermissionButtonRouter'
})

console.log('%c [  ]-13', 'font-size:13px; background:pink; color:#bf2c9f;', getAuthCode())
</script>

<style></style>
